<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssSix</title>
</head>
<style>
  .one{
    margin: 0 auto;
    background-color: orange;
    width: 800px;
  /*  height: 300px;*/  /*第一种清除浮动*/
    overflow:hidden   /*第5种清除浮动*/
  }
  .two{
    float: left;
    width: 300px;
    height: 300px;
    background-color: deepskyblue;
  }
  .three{
    float: right;
    width: 400px;
    height: 300px;
    background-color: pink;
  }
  .four{
    height: 200px;
    background-color: green;
  }
  .extra{
  clear:both; /*第二种清除浮动*/
  }

  .clearfix::after{  /*第3种清除浮动*/
    content: ' ';
    display: block;
    clear: both;
    /*height: 0;
    !*visibility: hidden; !*在低版本中设置兼容性*!*/
  }



  /*.clearfix::before：是清除外边距塌陷问题
  外边距塌陷:父子标签都是块，子标签加margin会影响父标签的位置*!
  !*这个也是清除浮动**/
  .clearfix::before,
  .clearfix::after{  /*第4种清除浮动*/
    content: '';
    display: table; /*转换为表格模式*/
  }
  /*这个才是正真的清除浮动*/
  .clearfix::after{
    clear: both;
  }
  .One{
    background-color: green;
  }
  *{
    margin: 0 ;
    padding: 0;
  }
</style>
<body>
<div>清除浮动</div>
<div class="One">
  <div>
    <ol>
      <li>1.在父标签上加上原来的高度(不建议使用)</li>
      <li>2.利用额外标签:在要清除盒子浮动最后面加上一个块标签使用属性clear:both</li>
      <li>3.使用伪元素:在父标签的类上添加clearfix类(::after)</li>
      <li>4.使用双伪元素:(::before,::after，::after)</li>
      <li>5.直接在父标签上添加overflow:hidden 属性</li>
    </ol>
  </div>

</div>

<div class="one clearfix">
  <div class="two"></div>
  <div class="three"></div>
  <!--<div class="extra"></div>-->
</div>
<div class="four"></div>

</body>
</html>
